<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#FFB800" lineWidth="15" :activeStyle="{
			             color: '#000000',
			             fontWeight: 'bold',
			             transform: 'scale(0.8)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(0.8)'
			         }" :list="list1" @change="tabChage"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexcenter" style="margin-top: 300rpx;" v-if="!list.data.length">
				<view class="placeholderimage"></view>
			</view>
			<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id" @click="todetail(item.id)">
				<view class="flexbetween">
					<view class="titletext hei_text bold">{{item.order_no}}</view>
					<!-- // 状态:0=全部,10=待审核,20=待出库,30=待发货,40=待收货,50=已完成,60=已作废,70=已拒绝 -->
					<view class="lable xiaohuang" v-show="item.status==10">待审核</view>
					<view class="lable xiaohuang" v-show="item.status==20">待出库</view>
					<view class="lable xiaohuang" v-show="item.status==30">待发货</view>
					<view class="lable xiaohuang" v-show="item.status==40">待收货</view>
					<view class="lable xiaolv" v-show="item.status==50">已完成</view>
					<view class="lable xiaohong" v-show="item.status==60">已作废</view>
					<view class="lable xiaohong" v-show="item.status==70">已拒绝</view>
				</view>
				<view class="flexleft margin_top" v-for="ite in item.ordergoods" :key="ite.id">
					<image :src="ite.goods_info.image_text" mode="" class="leftListimg margin_right"></image>
					<view class="flexcolumn">
						<view class="titletext hei_text strongtext xiankuan">{{ite.goods_info.name}}</view>
						<!-- <view class="xiaohuang">积分：230</view> -->
						<view class="hei_text strongtext" v-show="ite.difference_type==1">
							规格:{{ite.goods_info.biggoodsunit.name}}</view>
						<view class="hei_text strongtext" v-show="ite.difference_type==2">
							规格:{{ite.goods_info.middlegoodsunit.name}}</view>
						<view class="hei_text strongtext" v-show="ite.difference_type==3">
							规格:{{ite.goods_info.smallgoodsunit.name}}</view>
						<view class="flexbetween" style="width:100%">
							<view class="xiaohong">*{{ite.num}}</view>
							<view class="xiaohuang" v-show="item.order_type==1">￥{{ite.total_price}}</view>
							<view class="xiaohuang" v-show="item.order_type==2">{{ite.total_payscore}}分</view>
						</view>
					</view>
				</view>
				<view class="margin_top" v-show="item.order_type==1">
					<view>
						合计：{{item.x_total_price}}<text v-show="Number(item.arrears_price)" style="color: #ff0000;">未付款{{item.arrears_price}}</text>优惠{{item.discount_price}}
						
					</view>
					<view>共{{item.x_goods_zl_num}}种{{item.x_goods_num}}件赠送{{item.x_total_score}}分</view>
				</view>
				<view class="margin_top" v-show="item.order_type==2">
					合计：{{item.x_total_payscore}}分共{{item.x_goods_zl_num}}种{{item.x_goods_num}}件
				</view>
				<view class="flexright margin_top ">
					创建时间：{{item.createtime_text}}
				</view>
				<view class="flexright margin_top">
					<view class="listbtnhui" v-if="item.status==10" @click.stop="canceorder(item.id)">取消订单</view>
					<view class="listbtnhuang margin_left" v-if="Number(item.arrears_price) && item.status!=60 && item.status!=70"
						@click.stop="payorder(item)">去支付</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/commonFun/httpRequest.js");
	export default {
		data() {
			return {
				current: 0,
				// 状态:0=全部,10=待审核,20=待出库,30=待发货,40=待收货,50=已完成,60=已作废,70=已拒绝
				list1: [{
					name: '全部',
					id: "0"
				}, {
					name: '待审核',
					id: "10"
				}, {
					name: '待出库',
					id: "20"
				}, {
					name: '待发货',
					id: "30"
				}, {
					name: '待收货',
					id: "40"
				}, {
					name: '已完成',
					id: "50"
				}],
				page: 1,
				limit: 10,
				list: {
					data: [],
				},
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			// 支付订单
			payorder(item) {
				let data = {
					id: item.id,
					x_total_price: item.x_total_price,
					order_no:item.order_no,
					arrears_price:item.arrears_price
				}
				uni.navigateTo({
					url: "/pages/shoppingCart/pay?data=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			//取消订单
			canceorder(id) {
				httpRequest.modal('提示', '确定取消订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('/customapi/saleorder/applySaleOrder', 'POST', {
							id
						}).then(res => {
							httpRequest.toast(res.msg)
							this.init()
						})
					}
				})
			},
			tabChage(item) {
				this.current = item.id;
				this.init();
			},
			todetail(id) {
				uni.navigateTo({
					url: '/pages/user/myOrder/orderDetail?id=' + id,
				})
			},
			// 我的订单列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/customapi/Saleorder/index', 'POST', {
					page: page || 1,
					limit: _this.limit,
					status: _this.current,
				}).then(res => {
					let resList = res.data.data;
					if (isPage == true) {
						_this.list.data.push(...resList);
					} else {
						_this.list = res.data;
						_this.list.data = resList;
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-tabs__wrapper__nav {
		background-color: #fff;
		justify-content: space-between;
	}

	.flexcolumn {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: flex-start;
		height: 180rpx;
		width: 100%;
	}

	.leftListimg {
		min-width: 180rpx;
		min-height: 180rpx;
		max-width: 180rpx;
		max-height: 180rpx;
		border-radius: 10rpx;
	}


	.public {
		color: #F5AC4F !important;
		border: 1px solid #F5AC4F !important;
	}

	.all {
		color: #333333;
	}

	.shopBox {
		padding: 20rpx;

		.shopM {
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
		}

		.shop {
			padding: 20rpx;
			display: flex;
			font-size: 32rpx;

			image {
				width: 226rpx;
				height: 210rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}

			.rightBox {
				flex-grow: 1;

				.price {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.p1 {
						color: #FF0000;
					}

					.p2 {
						font-size: 32rpx;
					}
				}
			}
		}

	}

	.bottom {
		padding: 0 20rpx 20rpx 20rpx;
		font-size: 32rpx;
		overflow: hidden;

		.b1 {
			float: left;
			color: #999999;
		}

		.b2 {
			float: right;
			color: #F5AC4F;
			border-radius: 20px;
			border: 1px solid #F5AC4F;
			padding: 8rpx 12rpx;
		}

		.b3 {
			float: right;
			color: #333;
			border-radius: 20px;
			border: 1px solid #333;
			padding: 8rpx 12rpx;
		}

		.padd {
			padding: 4rpx 36rpx;
		}

		.d2 {
			float: right;
			display: flex;

			view:first-child {
				margin-left: 20rpx;
				color: #999999;
				border: 1px solid #999999;
				padding: 4rpx 10rpx;
				border-radius: 20px;
			}

			view:last-child {
				margin-left: 20rpx;
				border-radius: 20px;
				color: #333333;
				border: 1px solid #333333;
				padding: 4rpx 10rpx;
			}
		}

		.clearOrder {
			color: #FF0000;
			border: 1px solid #FF0000;
		}
	}

	/deep/.u-tabs__wrapper__nav__item__text {
		font-size: 38rpx !important;
	}
</style>